<!DOCTYPE html>
<html>
<head>
<title>Electromagnetic Field Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="420" style="border:1px solid #d3d3d3;"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// --- Define Geometry and Parameters ---
const cx = 250;
const cy = 250; // Y-coordinate for the center of the inner arc (and the point O)
const b = 150;  // Dimension/radius for the outer arc
const a = 75;   // Dimension/radius for the inner arc
const shoulder_y_offset = -50; // Y-offset for the shoulder from the point O

// The shape is drawn literally from the image.
// O is the center of the inner arc.
// The outer arc has a different center to accommodate the shoulders.
const O = { x: cx, y: cy };
const C_outer = { x: cx, y: cy + shoulder_y_offset };
const shoulder_y = cy + shoulder_y_offset;

// --- Style ---
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 2;

// --- Draw the Main Shape ---
ctx.beginPath();
// Start at the right corner of the notch bottom
ctx.moveTo(O.x + a, O.y);
// Draw the bottom semi-circular arc
ctx.arc(O.x, O.y, a, 0, Math.PI, false); // from (O.x+a, O.y) to (O.x-a, O.y)
// Left vertical wall of the notch
ctx.lineTo(O.x - a, shoulder_y);
// Left horizontal shoulder
ctx.lineTo(O.x - b, shoulder_y);
// Top semi-circular arc
ctx.arc(C_outer.x, C_outer.y, b, Math.PI, 0, false); // from (O.x-b, shoulder_y) to (O.x+b, shoulder_y)
// Right horizontal shoulder
ctx.lineTo(O.x + a, shoulder_y);
// Close the path, which draws the right vertical wall
ctx.closePath();
ctx.stroke();

// --- Draw Labels and Annotations ---

// Set font for labels
ctx.font = 'italic 22px Times New Roman';

// Label O
ctx.fillText('O', O.x - 28, O.y + 5);

// Radius line 'b'
const angle_b = 135 * Math.PI / 180; // 135 degrees
// Point on outer arc
const p_on_b_arc_x = C_outer.x + b * Math.cos(angle_b);
const p_on_b_arc_y = C_outer.y + b * Math.sin(angle_b);
ctx.beginPath();
ctx.moveTo(O.x, O.y);
ctx.lineTo(p_on_b_arc_x, p_on_b_arc_y);
ctx.stroke();
// Label 'b' near the line
const b_label_x = (O.x + p_on_b_arc_x) / 2;
const b_label_y = (O.y + p_on_b_arc_y) / 2;
ctx.fillText('b', b_label_x - 15, b_label_y);

// Radius line 'a'
const angle_a = 225 * Math.PI / 180; // 225 degrees
// Point on inner arc
const p_on_a_arc_x = O.x + a * Math.cos(angle_a);
const p_on_a_arc_y = O.y + a * Math.sin(angle_a);
ctx.beginPath();
ctx.moveTo(O.x, O.y);
ctx.lineTo(p_on_a_arc_x, p_on_a_arc_y);
ctx.stroke();
// Label 'a' near the line
const a_label_x = (O.x + p_on_a_arc_x) / 2;
const a_label_y = (O.y + p_on_a_arc_y) / 2;
ctx.fillText('a', a_label_x - 20, a_label_y + 8);

// Label λ (lambda) for linear charge density
ctx.fillText('λ', O.x - b * 0.6, C_outer.y - b * 0.8);


// --- Draw Caption ---
ctx.font = '24px KaiTi'; // A common Chinese font for captions
ctx.textAlign = 'center';
ctx.fillText('习题 8-21 图', cx, cy + a + 80);

</script>

</body>
</html>